<!DOCTYPE html>
<html class="layui-bg-white">
<head th:include="include :: header"></head>
<body>
<div class="layui-form" style="padding:20px;">
    <input id="id" name="id" th:value="${guide.id}" type="hidden">
    <input type="hidden" id="subjectName" name="subjectName" th:value="${guide.subjectName}">
    <input type="hidden" id="content" name="content" th:value="${guide.content}">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>科目名称：</label>
        <div class="layui-input-block">
            <select lay-filter="subjectId" id="subjectId" name="subjectId" class="form-control chosen-select" lay-search lay-verify="required">
                <option value="">--请选择--</option>
                <option th:each="item : ${subject}" th:value="${item.id}" th:text="${item.name}" th:selected="${item.id==guide.subjectId}"></option>
            </select>
        </div>
    </div>
    <div id="textArea">
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="LAY-operate-submit" id="LAY-operate-submit" value="确认">
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript">
    var guide = {};
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index'         //主入口模块
    }).use(['index', 'form', 'layedit'], function () {
        var $ = layui.$, form = layui.form, layedit = layui.layedit;

        form.verify(commonJs.form.verify);

        form.on('select(subjectId)', function (data) {
            var value = data.value || '';
            var text = '';
            if (value != '') {
                text = data.elem[data.elem.selectedIndex].text || '';
            }
            $('#subjectName').val(text);
        });

        var layeditArr = {};


        //初始和获取富文本的内容
        layedit.set({
            uploadImage: {
                url: ctx + '/manage/file/file/layedit' //接口url
            }
        });

        //初始化form的数据
        guide.initFormData = function () {
            getData();
        };

        guide.firstTitleAdd = function () {
            var firstTitleContent = '<div class="content">\n' +
                '            <div class="layui-form-item first">\n' +
                '                <div class="layui-col-md6">\n' +
                '                <label class="layui-form-label">\n' +
                '                    <span class="required">*</span>一级标题：</label>\n' +
                '                    <div class="layui-input-block">\n' +
                '                        <input type="text" lay-verify="required" placeholder="请输入一级标题" autocomplete="off" class="layui-input firstTitle">\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-md6" style="text-align:right">\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="guide.firstTitleAdd();"><i class="layui-icon"></i>添加一级</button>\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="guide.secondTitleAdd(this);"><i class="layui-icon"></i>添加二级</button>\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="guide.firstDel(this);"><i class="layui-icon"></i>删除</button>\n' +
                '                </div>\n' +
                '            </div></div>';
            $('#textArea').append(firstTitleContent);
        };

        guide.secondTitleAdd = function (obj) {
            var id = 'second' + commonJs.getSerialNumber();
            var secondTitleContent = '<div class="second"><div class="layui-form-item">\n' +
                '        <label class="layui-form-label"><span class="required">*</span>二级标题：</label>\n' +
                '        <div class="layui-input-block">\n' +
                '            <input type="text" lay-verify="required" placeholder="请输入二级标题" autocomplete="off" class="layui-input secondTitle">\n' +
                '        </div>\n' +
                '        <div class="layui-row layui-form-item">\n' +
                '            <div class="layui-col-md12">\n' +
                '                <div class="layui-input-block">\n' +
                '                    <textarea id="' + id + '" class="layui-textarea secondContent" placeholder="请输入指南内容"></textarea>\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="layui-col-md12" style="text-align:right;">\n' +
                '                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="guide.secondDel(this);"><i class="layui-icon"></i>删除</button>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </div></div>';

            $(obj).parents('.content').append(secondTitleContent);
            layeditArr[id] = layedit.build(id);
        };


        guide.firstDel = function (target) {
            if ($('.content').length > 1) {
                $(target).parents('.content').remove();
            } else {
                commonJs.openMsg('cry', '一级标题现在只有一个，无法再删除了！');
            }
        };

        guide.secondDel = function (target) {
            $(target).parents('.second').remove();
        };

        //拼接json
        function getData() {
            var firstArr = [];
            var secondArr = [];
            $(".content").each(function () {
                var firstTitle = $(this).find(".firstTitle").val() || '';
                $(this).find(".second").each(function () {
                    var second = {};
                    var secondTitle = $(this).find(".secondTitle").val() || '';
                    var id = $(this).find(".secondContent").attr("id");
                    second.title = secondTitle;
                    second.content = layedit.getContent(layeditArr[id]);
                    secondArr.push(second);
                });
                var first = {};
                first.first = firstTitle;
                first.second = secondArr;
                firstArr.push(first);
                secondArr = [];
            });
            $('#content').val(JSON.stringify(firstArr));
        }

        function setDate(data) {
            var idArr = [];
            var first = data.first;
            var second = data.second;
            var html = '<div class="layui-form-item first">\n' +
                '                <div class="layui-col-md6">\n' +
                '                <label class="layui-form-label">\n' +
                '                    <span class="required">*</span>一级标题：</label>\n' +
                '                    <div class="layui-input-block">\n' +
                '                        <input type="text" lay-verify="required" placeholder="请输入一级标题" autocomplete="off" class="layui-input firstTitle" value=' + first + '>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="layui-col-md6" style="text-align:right">\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="guide.firstTitleAdd();"><i class="layui-icon"></i>添加一级</button>\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="guide.secondTitleAdd(this);"><i class="layui-icon"></i>添加二级</button>\n' +
                '                    <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top:6px;" onclick="guide.firstDel(this);"><i class="layui-icon"></i>删除</button>\n' +
                '                </div>\n' +
                '            </div>';

            second.forEach(function (element, index) {
                var title = element.title;
                var content = element.content;
                var id = 'second' + commonJs.getSerialNumber();
                var secondTitleContent = '<div class="second"><div class="layui-form-item">\n' +
                    '        <label class="layui-form-label"><span class="required">*</span>二级标题：</label>\n' +
                    '        <div class="layui-input-block">\n' +
                    '            <input type="text" lay-verify="required" placeholder="请输入二级标题" autocomplete="off" class="layui-input secondTitle" value="' + title + '">\n' +
                    '        </div>\n' +
                    '        <div class="layui-row layui-form-item">\n' +
                    '            <div class="layui-col-md12">\n' +
                    '                <div class="layui-input-block">\n' +
                    '                    <textarea id="' + id + '" class="layui-textarea secondContent" placeholder="请输入指南内容">' + content + '</textarea>\n' +
                    '                </div>\n' +
                    '            </div>\n' +
                    '            <div class="layui-col-md12" style="text-align:right;">\n' +
                    '                <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="guide.secondDel(this);"><i class="layui-icon"></i>删除</button>\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </div></div>';

                html = html + secondTitleContent;
                idArr.push(id);
            });
            html = '<div class="content">' + html + '</div>';
            $('#textArea').append(html);
            idArr.forEach(function (element, index) {
                layeditArr[element] = layedit.build(element);
            });
        }

        function parseData() {
            var data = JSON.parse($('#content').val());
            data.forEach(function (element, index) {
                setDate(element);
            });
        }

        parseData();
    })
</script>
</body>
</html>